<template>
  <el-dialog title="分配权限" :visible="showPermDialog" @close="btnPermCancel">
    <!-- 权限是一颗树 -->
    <!-- 将数据绑定到组件上 -->
    <!-- check-strictly 如果为true 那表示父子勾选时  不互相关联 如果为false就互相关联 -->
    <!-- id作为唯一标识 -->
    <el-tree
      ref="permTree"
      :data="list"
      :props="{ label: 'name' }"
      show-checkbox
      :default-checked-keys="selectCheck"
      node-key="id"
      :check-strictly="true"
    />
    <!-- 确定 取消 -->
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small" @click="btnPermOK">确定</el-button>
        <el-button size="small" @click="btnPermCancel">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getPermissionList } from '@/api/permisson'
import { getRoleInfoData, assignPerm } from '@/api/settings'
import { tranListToTreeData } from '@/utils'
export default {
  name: 'AuthSet',
  data() {
    return {
      showPermDialog: false, // 控制分配权限弹层的显示后者隐藏
      list: [], // 专门用来接收权限数据 树形数据
      selectCheck: [], // 定义一个数组来接收 已经选中的节点
      roleId: null // 用来记录分配角色的id
    }
  },
  methods: {
    // 获取所有权限
    async getPermissionList() {
      const { data } = await getPermissionList()
      // console.log(data)
      this.list = tranListToTreeData(data, '0')
    },
    // 获取当前角色的权限
    async getRoleAuth(id) {
      const { data } = await getRoleInfoData(id)
      this.selectCheck = data.permIds
      this.roleId = id
    },
    btnPermCancel() {
      this.showPermDialog = false
      this.list = []
    },
    // 提交
    async btnPermOK() {
      // 获取打勾的和半打勾的数据(不交半勾的，取决于后台)
      const permIds = this.$refs.permTree.getCheckedKeys()
      if (permIds.length === 0) return this.$message.warning('请勾选权限')
      // 发送请求
      await assignPerm({
        id: this.roleId,
        permIds
      })
      this.$message.success('关联成功')
      this.showPermDialog = false
    }
  }
}
</script>

<style>

</style>

